<template>
  <header ref="refheader">
    <div class="innerheader clear">
      <ul class="leftnav fl" v-if="islogo">
        <li>
          <router-link to="/"><a-icon type="home" />M商城</router-link>
        </li>
      </ul>
      <ul class="logobox fl" v-else>
        <li>
          <router-link to="/">
            <img src="@/assets/img/logobox/M.png" />
            <a-icon type="home" />
          </router-link>
        </li>
      </ul>
      <!-- 右边 -->
      <ul class="rightnav fr">
        <li v-if="!isuserLogin">
          <router-link to="/login"><a-icon type="user" />账户</router-link>
        </li>
        <li v-else>
          <a>{{ current }} </a>
        </li>
        <li @click="Logout" v-if="isuserLogin">
          <router-link to="/">[退出]</router-link>
        </li>
        <li v-if="isuserLogin">
          <a><a-icon type="file-text" />我的订单</a>
        </li>
        <li class="buyCar" @click="jumpPage">
          <a>
            <a-icon type="shopping-cart" />购物车({{ $store.state.cartnum }})
          </a>
        </li>
        <li>
          <a><a-icon type="question-circle" />帮助中心</a>
        </li>
      </ul>
      <!-- 左边E -->
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [],
      islogo: true,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$store.dispatch("setUser", null);
    });
  },
  methods: {
    Logout() {
      this.$store.dispatch("setUser", null);
    },
    jumpPage() {
      if (this.$store.getters.getIsLogin) {
        this.$router.push("/cart");
      } else {
        this.$router.push("/login");
      }
    },
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
       scrollTop>140?this.$refs.refheader.style.position="fixed":this.$refs.refheader.style.position="relative";
       this.islogo= scrollTop>140? false:true
    },
  },
  computed: {
    current: function () {
      return this.$store.getters.getCurrentuser;
    },
    isuserLogin: function () {
      if (sessionStorage.getItem("user")) {
        this.$store.commit("userSatus", sessionStorage.getItem("user"));
      } else {
        this.$store.commit("userSatus", "");
      }
      return this.$store.getters.getIsLogin;
    },
  },
  created: function () {
    let list = localStorage.getItem("goodsList");
    this.goodsList = JSON.parse(list) || [];
    this.$store.state.cartnum = this.goodsList.length;
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.windowScroll);
  },
};
</script>


<style lang="scss" scoped>
header {
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border-bottom:1px solid #eee ;
  // box-shadow: 0 2px 5px #d7d7d7;
  .innerheader {
    width: 1200px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    .leftnav,
    .rightnav {
      margin: 0;
      height: 40px;
      line-height: 40px;
      li {
        display: inline-block;
        padding: 0 8px;
        a {
          color: #afafaf;
          font-size: 12px;
          &:hover {
            color: $color;
          }
        }
      }
    }
    .logobox {
      cursor: pointer;
      background-color: black;
      overflow: hidden;
      border: 1px solid white;
      padding: 0;
      margin: 5px 0;
      a {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        position: relative;
        img {
          width: 30px;
          height: 30px;
          transition: transform 0.3s;
        }
        .anticon {
          font-size: 20px;
          color: #fff;
          margin-left: -80px;
          transition: transform 0.3s linear;
        }
        &:hover .anticon {
          transform: translate(54px);
          transition: transform 0.3s linear;
        }
        &:hover img {
          transform: translate(45px);
          transition: transform 0.3s linear;
        }
      }
    }
    .anticon {
      padding-right: 5px;
    }
  }
  // .isFixed {
  //   position: fixed;
  //   top: 0;
  //   // left: 0;
  //   z-index: 2;
  // }
}
</style>